import React  from "react";
import ReactDOM  from "react-dom/client";


// 创建根容器
let root = ReactDOM.createRoot(document.getElementById('root'))

// 创建react元素
// 刚才  用React.createElement()方法创建
// let pp = React.createElement('p',{className:'box'},
//                               React.createElement('h1',{title:'标题'},
//                                                   React.createElement('a',{href:'http://www.baidu.com'},"百度一下")
                              
//                               )
// )
// 现在  用jsx语法
// 有点：简洁  直观  一目了然
let pp = (
    <>
    <div>
        <p>
            <h1 title="标题" className="box">
                <a href="http://www.baidu.com">百度一下</a>
            </h1>
        </p>
    </div>
    </>
)
// 创建jsx的注意点
// 1、变量名采用驼峰命名法 
// 2、react元素值，最好用 ()括住
// 3、元素只用一个根节点，如果没有，可以 <> </> 幽灵节点
// 4、有一些特殊的属性  比如class=>className   
// 渲染
root.render(pp)